<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
    <#include "admin/common/header.ftl"/>
<body>
<div class="container-fixed-xs" style="background: url("../static/images/big.jpg") no-repeat;">
    <div class="user-login">
        <div class="user-login-box user-login-header">
            <h2>注册</h2>
        </div>
        <form id="regForm" method="post" action="/reg">
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="email">电子邮件</label>
                <input type="text" class="form-control" id="email" name="email" placeholder="电子邮件">
            </div>
            <div class="form-group">
                <label for="phone">手机号</label>
                <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号">
            </div>
            <div class="form-group">
                <label for="passWord">密码</label>
                <input type="password" class="form-control" id="passWord" name="passWord" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="password">重复密码</label>
                <input type="password" class="form-control" id="rpassword" name="rpassword" placeholder="重复密码">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-large btn-block btn-primary">注册</button>
                <button id="resetBtn" type="button" class="btn btn-large btn-block btn-primary">重置</button>
            </div>
            <div class="form-group">
                <a href="/login.html">登录</a>
            </div>
        </form>
    </div>
</div>
<script>
    $(function () {
       $('#regForm').bootstrapValidator({
           message: 'This value is not valid',
           // 根据验证结果显示的各种图标
           feedbackIcons: {
               valid: 'glyphicon glyphicon-ok',
               invalid: 'glyphicon glyphicon-remove',
               validating: 'glyphicon glyphicon-refresh'
           },
           fields: {
               name: {
                   validators: {
                       notEmpty: {
                           message: '用户名不能为空'
                       }
                   }
               },
               email: {
                   validators: {
                       notEmpty: {
                           message: '邮箱不能为空'
                       },
                       emailAddress: {
                           message: '邮箱地址格式有误'
                       }
                   }
               },
               phone: {
                   validators: {
                       notEmpty: {
                           message: '手机号不能为空'
                       }
                   }
               },
               passWord: {
                   message: '密码验证失败',
                   validators: {
                       notEmpty: {
                           message: '密码不能为空'
                       },
                       identical: {
                           field: 'passWord',
                           message: '两次密码不一致'
                       },
                   }
               },
               rpassword: {
                   message: '重复密码验证失败',
                   validators: {
                       notEmpty: {
                           message: '重复密码不能为空'
                       },
                       identical: {
                           field: 'passWord',
                           message: '两次密码不一致'
                       }
                   }
               }
           }
       })
       .on('success.form.bv', function (e) {
           // Prevent form submission
           e.preventDefault();

           // Get the form instance
           var $form = $(e.target);

           // Get the BootstrapValidator instance
           var bv = $form.data('bootstrapValidator');

           // Use Ajax to submit form data
           $.post($form.attr('action'), $form.serialize(), function(result) {
                 console.log(result);
                 if (result.errorCode == 'y') {
                    location.href = "http://localhost:8080/login.html";
                 } else {
                     new $.zui.Messager('提示消息：' + result.errorText, {
                         icon: 'exclamation-sign',
                         type: 'danger',
                         time: 2000
                     }).show();
                 }
           }, 'json');
      });
      $('#resetBtn').click(function() {
          $('#regForm').data('bootstrapValidator').resetForm(true);
      });
    });
</script>
<style>
    body {
        /*background: url(../static/images/back.jpg) no-repeat 0 0px;*/
        background-color: #F0F0F0;
        background-attachment:fixed;
        background-size:100%;
        height:auto;
    }
    .user-login {
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .user-login-header {
        text-align: center;
    }
    .user-login-box {
        padding-top: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
</style>
</body>
</html>